export default (app: any) => {
    app.directive('loading', {
        mounted(el: any, binding: any) {
            try {
                // 创建一个加载动画元素
                const spinner = document.createElement('div');
                spinner.className = 'loading-box';
                spinner.innerHTML = `
                <div class="loading-icon">
                    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-loading arco-icon-spin" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter"><path d="M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6"></path></svg>
                </div>
                `

                // 根据绑定的值来判断是否显示加载动画
                if (binding.value) {
                    el?.classList?.add('loading-wrap')
                    el?.appendChild(spinner);
                }
                // 在元素上存储加载动画元素的引用，以便在更新时使用
                el.__loadingSpinner = spinner;

            } catch (error) {

            }

        },
        updated(el: any, binding: any) {
            try {
                // 根据绑定的值来判断是否显示加载动画
                if (binding.value) {
                    el?.classList?.add('loading-wrap')
                    el?.appendChild(el?.__loadingSpinner);
                } else {
                    el?.classList?.remove('loading-wrap')
                    el?.removeChild(el?.__loadingSpinner);
                }
            } catch (error) {

            }
        },
        unmounted(el: any) {
            try {
                // 在指令被解绑时移除加载动画元素
                el.classList?.remove('loading-wrap')
                el?.removeChild(el?.__loadingSpinner);
                delete el?.__loadingSpinner;
            } catch (error) {

            }
        }
    })
}